<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <script>
        function print (dom, e) {
            console.log("print",e);
        }
        function show() {
            console.log("show");
        }
        window.onload = function() {
            var btnDom = document.getElementById("btn");
            btnDom.addEventListener("click",function(){
                console.log("click");
            });
            btnDom.addEventListener("click",function(){
                console.log("click2");
            })
        }
    </script>
</head>
<body>
    <input type="button" value="静态" onclick="print(this,event)" onclick="show()">
    <input type="button" value="动态" id="btn">

    <hr>
    <div id= "app" c-cloak>
        <input type="button" value="vue基本事件绑定" v-on:click="show()">
        <input type="button" value="vue基本事件绑定" v-on:click="print()">
        <input type="button" value="vue基本事件绑定" v-on:click="print">
        <input type="button" value="vue基本事件绑定" @click="print">
    
        <hr>
        <input type="button" value="不同类型的多种事件绑定" @click="print" @mouseover="printA"> 
        <input type="button" value="不同类型的多种事件绑定" v-on="{ click:print, mouseover:printA}">
        <input type="button" value="不同类型的多种事件绑定" v-on="events">
        <hr>
        <p>msg:{{ msg }}</p>
        <p>info:{{ info }}</p>
        <input type="button" value="修改仓库变量 msg" @click="setMsg">
        <input type="button" value="修改仓库变量 msg" @click=" msg='行内的赋值';info='新值';">
        <hr>
        <!-- 参数传递 -->
        <input type="button" value="匿名变量" @click="printArgs( '字符串', 1000, [1,2,3] )">
        <input type="button" value="仓库变量" @click="printArgs( msg, info )">
        vue 的事件绑定中，页面中
        <input type="button" value="仓库变量" @click="printArgs(this)">
        <!-- vue 中如果方法需要通过形参传递event事件源，必须使用vue重新定义的事件源关键字 $event -->
        <input type="text" @input="printValue($event)">
        <p>inputStr:{{ inputStr }}</p>
        <input type="text" @input="inputStr=$event.target.value">
        <!-- 默认自带事件源参数 -->
        <input type="text" @input="printValue">
        <hr>
        <!-- 
            动态事件名的绑定方式，参数一 [] 表示，可以提供 vue 实例数据仓库的变量
            [] 中的变量名称不接收驼峰定义方式 
        -->
        <input type="button" value="动态事件" @[eventname]="print()">
        <input type="button" value="改变前面按钮的事件为mouseover" @click="eventname='mouseover'">
    </div>
    <script>
        new Vue({
            el:"#app",
            data :{
                msg:"仓库数据msg",
                info:"info变量",
                inputStr:"",
                eventname:"click",
                events:{
                    click:function(){
                        console.log("click");
                    },
                    mouseover:function(){
                        console.log("mousover");
                    }
                }
            },
            methods:{
                print:function(event){
                    console.log("vue方法仓库的print方法")
                },
                printA(){
                    console.log("vue方法仓库的printA方法")
                },
                setMsg(){
                    console.log("setMsg方法")
                    this.msg = "新数据";
                },
                printArgs(arg1,arg2,arg3){
                    console.log("arg1:",arg1);
                    console.log("arg2:",arg2);
                    console.log("arg3:",arg3);
                },
                printValue(e){
                    console.log(e);
                    console.log("用户输入的数据：", e.target.value);
                }
            }
        })
    </script>
</body>
</html>